<!-- vueAndDeepseek/src/components/Divider/Divider.vue -->
<template>
  <div
      :class="['divider', `divider--${orientation}`, customClass]"
      :style="combinedStyles"
      role="separator"
      @click="handleClick"
  >
    <span 
        v-if="content" 
        :class="['divider__content', `divider__content--${contentPosition}`]"
    >
      {{ content }}
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  orientation: {
    type: String,
    default: 'horizontal',
    validator: (value) => ['horizontal', 'vertical'].includes(value)
  },
  content: {
    type: String,
    default: ''
  },
  contentPosition: {
    type: String,
    default: 'center',
    validator: (value) => ['left', 'center', 'right'].includes(value)
  },
  color: {
    type: String,
    default: '#dcdfe6'
  },
  thickness: {
    type: String,
    default: '1px'
  },
  length: {
    type: String,
    default: '100%'
  },
  padding: {
    type: String,
    default: '0'
  },
  customClass: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

const combinedStyles = computed(() => {
  const styles = {
    '--divider-color': props.color,
    '--divider-thickness': props.thickness,
    '--divider-padding': props.padding
  }
  
  if (props.orientation === 'vertical') {
    styles.height = props.length
  } else {
    styles.width = props.length
  }
  
  return styles
})

const handleClick = (event) => {
  emit('click', event)
}
</script>

<style scoped>
.divider {
  position: relative;
  background: var(--divider-color);
}

.divider--horizontal {
  display: flex;
  align-items: center;
  margin: 16px 0;
  height: var(--divider-thickness);
}

.divider--vertical {
  display: inline-block;
  width: var(--divider-thickness);
  margin: 0 8px;
  vertical-align: middle;
}

.divider__content {
  background: #fff;
  padding: var(--divider-padding);
  font-size: 14px;
  color: #606266;
}

.divider--horizontal .divider__content {
  position: absolute;
}

.divider__content--left {
  left: 20px;
}

.divider__content--center {
  left: 50%;
  transform: translateX(-50%);
}

.divider__content--right {
  right: 20px;
}
</style>